<!DOCTYPE html>
<html>
<!--
Acquiring the swapchain texture without presenting should render transparent black.
This is a test for crbug.com/1240182 where previous frames' contents were presented
if the current texture for the frame was acquired but not rendered to.
-->
<head>
  <style type="text/css">
    .nomargin {
      margin: 0;
    }
  </style>
  <script type="text/javascript">
    var g_swapsBeforeAck = 15;

    function waitForFinish() {
      if (g_swapsBeforeAck == 0) {
        sendResult("SUCCESS");
      } else {
        g_swapsBeforeAck--;
        window.requestAnimationFrame(waitForFinish);
      }
    }

    function sendResult(status) {
      if (window.domAutomationController) {
        window.domAutomationController.send(status);
      } else {
        console.log(status);
      }
    }

    async function main() {
      const canvas = document.getElementById('canvas_gpu');
      const adapter = await navigator.gpu?.requestAdapter();
      const device = await adapter?.requestDevice();
      const context = canvas.getContext('webgpu');
      if (!device || !context) {
        console.error("Failed to initialize WebGPU");
        sendResult("FAILURE");
      }

      context.configure({
        device: device,
        format: 'bgra8unorm',
        usage: GPUTextureUsage.RENDER_ATTACHMENT,
        alphaMode: 'premultiplied',
      });

      let framesToRender = 30;
      function renderCallback() {
        // Fill the swap buffer cache with rendered textures.
        if (framesToRender-- > 0) {
          const renderPassDescriptor = {
            colorAttachments: [
              {
                view: context.getCurrentTexture().createView(),
                loadOp: 'clear',
                clearValue: { r: 1.0, g: 0.0, b: 0.0, a: 1.0 },
                storeOp: 'store',
              },
            ],
          };

          const commandEncoder = device.createCommandEncoder();
          const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
          passEncoder.end();
          device.queue.submit([commandEncoder.finish()]);

          window.requestAnimationFrame(renderCallback);
          return;
        }

        // Acquire the texture and do nothing with it.
        // We should expect to render transparent black (0, 0, 0, 0).
        context.getCurrentTexture();
        waitForFinish();
      };

      window.requestAnimationFrame(renderCallback);
    }
  </script>
</head>

<body onload="main()" style="background: rgb(100, 100, 100)">
  <canvas id="canvas_gpu" width="200" height="200" class="nomargin"></canvas>
</body>

</html>
